<!--
  Author: 善良的YWJ
  Created by shanliangdeYWJ on 2020/09/09
  File: 05.3解决异步设置值每个组件都是独立的.html
  Description: "
  
   请输入文件描述内容
  
               " 
  Github: https://github.com/shanliangdeYWJ
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <meta name="keywords" content="">
  <meta name="description" content="">
  <title>06.4向事件处理程序传递参数</title>
  <style></style>
</head>

<body>
  <!-- 这是 react渲染到页面上的结点 可以创建多个节点 -->
  <div id="root"></div>

  <!-- 加载 React。-->
  <!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->
  <script src="../js/react@16.development.js" crossorigin></script>
  <script src="../js/react-dom@16.development.js" crossorigin></script>
  <script src="../js/babel@6.min.js"></script>


  <!-- 加载我们的 React 组件。-->
  <script type="text/babel">

    class Toggle1 extends React.Component {
      deleteRow(arg1, arg2) { console.log('arg1:', arg1, 'arg2:', arg2); };
      render() {
        return (
          <div>
            {/* 这里的必须是显示的传递 e 这个参数 */}
            <button onClick={(e) => this.deleteRow(this.props.id, e)}>显性传递</button>
          </div>
        )
      };
    };

    class Toggle2 extends React.Component {
      deleteRow(arg1, arg2) { console.log('arg1:', arg1, 'arg2:', arg2); };
      render() {
        return (
          <div>
            {/* 这里的 e事件 是隐式传递的先是 deleteRow的this 绑定到 Toggle2这个类上，然后给函数 deleteRow 传入id值 后面还有一个隐性的 e */}
            <button onClick={this.deleteRow.bind(this, this.props.id)}>隐性传递</button>
          </div>
        )
      };
    }

    ReactDOM.render(
      <div>
        <h1>打开浏览器 发现 函数可以接收参数  并且访问到 this</h1>
        <Toggle1 id={1} /> <br />
        <Toggle2 id={2} />
      </div>,
      document.getElementById('root')
    );
  </script>
</body>

</html>